<!DOCTYPE html>
<html>
<head>
  <title>词嵌入数据收集</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <style>
    .calendar {
      height:3em;
      text-align:center;
    }
  </style>
</head>
<body>

<div id="container" class="container">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark mb-2">
    <!-- Brand -->
    <a class="navbar-brand btn" data-bs-toggle="modal" data-bs-target="#myModal" @click="md_embedding">词嵌入数据收集</a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link btn" data-bs-toggle="modal" data-bs-target="#myModal" @click="md_about">关于</a>
        </li>
      </ul>
    </div> 
  </nav>

  <!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
  <div class="row mb-3">
    <div id="data_base" class="col-6 border" style="height: 700px;overflow: auto;">
      <div id="button" class="input-group">
        <input type="button" class="form-control btn btn-primary" value="下载" @click="downloadJson">
        <input type="button" class="form-control btn btn-primary" value="回传" @click="hFU_modal_dialog"
            data-bs-toggle="modal" data-bs-target="#myModal">
        <input type="button" class="form-control btn btn-primary" value="《" @click="data_base_pagination('《')">
        <input type="button" class="form-control btn btn-primary" value="<" @click="data_base_pagination('<')">
        <select class="form-select form-control btn-primary" v-model="pagination">
          <option v-for="index in data_base_cards[1]" :value="(index - 1) * 19">{{ (index - 1) * 19 + 1 }}</option>
        </select>
        <input type="button" class="form-control btn btn-primary" value=">" @click="data_base_pagination('>')">
        <input type="button" class="form-control btn btn-primary" value="》" @click="data_base_pagination('》')">
      </div>
      <div class="card" v-for="(card, index) in data_base_cards[0]">
        <div class="card-header">
          <a :id="index" class="btn" data-bs-toggle="collapse" :href="'#data_base-'+index">
            {{ card.subject }}
          </a>
        </div>
        <div :id="'data_base-'+index" class="collapse" data-bs-parent="#data_base">
          <div class="card-body">
            {{ card.content }}
          </div>
        </div>
      </div>
    </div>
    <div id="calendar" class="col-6 border" style="height: 700px;">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="主题" v-model="work.subject">
        <span class="input-group-text btn btn-primary" @click="work2data_base">更新</span>
      </div>
      <textarea class="form-control" rows="9" placeholder="内容" v-model="work.content"></textarea>
      <div id="button" class="input-group mt-2">
        <input type="button" class="form-control btn btn-primary" value="+">
        <input type="button" class="form-control btn btn-primary" value="-">
        <input type="button" class="form-control btn btn-primary" value="*">
        <input type="button" class="form-control btn btn-primary" value="/">
        <input type="button" class="form-control btn btn-primary" value="=">
      </div>
      <div class="card">
        <div class="card-header">
          <a class="btn" data-bs-toggle="collapse" href="#collapse1">
            选项一
          </a>
        </div>
        <div id="collapse1" class="collapse" data-bs-parent="#ai">
          <div class="card-body">
            #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 模态框 -->
  <div class="modal" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">{{ modal_dialog.title }}</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <!-- 模态框内容 -->
        <div class="modal-body" v-html="modal_dialog.body"></div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<script>

  const cfVM = Vue.createApp({
    data() {
      return {
        pagination: 0,
        testpag: "",
        calendar: [],
        work: {
          subject: "",
          content: ""
        },
        data_base: {
          cards: []
        },
        modal_dialog: {
          title: "模态框标题",
          body: '<h3>模态框内容..</h3>',
        },
      }
    },
    methods: {
      handleFileUpload(event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            try {
              this.data_base = JSON.parse(e.target.result);
            } catch (error) {
              console.error("无法解析JSON文件:", error);
            }
          };
          reader.onerror = (e) => {
            console.error("读取文件时出错:", e);
          };
          reader.readAsText(file);
        }
      },
      downloadJson() {
        if(this.data_base.cards.length > 0){
          const jsonString = JSON.stringify(this.data_base);
          const blob = new Blob([jsonString], { type: 'application/json' });
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'data_base.json');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }else{
          alert("列表无数据！")
        }
      },
      data_base_pagination(start){
        switch(start){
          case "《":
            this.pagination = 0;
            break;
          case "<":
            this.pagination = Math.max(0, this.pagination - 19);
            break;
          case "》":
            this.pagination = Math.max(this.data_base.cards.length - 19, this.pagination);
            break;
          case ">":
            this.pagination = Math.min(this.data_base.cards.length - 1, this.pagination + 19);
            break;
          default:
            break;
        }
      },
      work2data_base(){
        this.data_base.cards.push(JSON.parse(JSON.stringify(this.work)));
        this.work = { subject: "", content: "" };
      },
      hFU_modal_dialog(){
        this.modal_dialog.title = '回传数据';
        this.modal_dialog.body = '<input type="file" onchange="cfVM.handleFileUpload(event)">';
      },
      md_embedding(){
        this.modal_dialog.title = '词嵌入数据收集';
        this.modal_dialog.body = `<p style="text-indent: 2em;">下方右侧的主题和内容输入框，
分别输入需要的内容，
点击其右上角的更新按钮，
内容会更新到左侧的列表框。
左侧的下载按钮点击后，
能够将其下方的列表内容保存成JSON格式文件，
并进行下载。
回传按钮点击后，
可以进行文件回传功能，
选择前面下载的JSON文件回传，
将覆盖下方列表框的内容。
</p>`;
      },
      md_about(){
        this.modal_dialog.title = '词嵌入数据收集 关于';
        this.modal_dialog.body = '<p style="text-indent: 2em;">建模完善中...</p>';
      },
    },
    computed: {
      data_base_cards(){
        start = this.pagination;
        end = Math.min(start + 19, this.data_base.cards.length);
        return [this.data_base.cards.slice(start, end), Math.floor(this.data_base.cards.length / 19) + 1];
      },
    },
    mounted() {
      this.pagination = Math.floor(this.data_base.cards.length / 19) * 19;
    }
  }).mount('#container');

</script>

</body>

</html>